<script setup>
import * as IndustrialComplexService from '@/api/visual/industrialComplex'

const pageData = ref({
  mes1: {
    collectData: [],
    key: 1,
    config: {
      data: [],
      header: ['工单单号', '工单物料名称', '客户名称', '订单来源', '计划产量', '状态', '入库总数'],
      headerBGC: 'rgba(0,0,0,0)',
      oddRowBGC: '#00275e',
      evenRowBGC: '#001447',
      columnWidth: [60, 200, 240, 200, 120, 120, 120, 140],
      align: ['center', 'center', 'center', 'center', 'center', 'center', 'center'],
      rowNum: 10,
      index: true
    }
  },
  mes2: {
    collectData: [],
    key: 1,
    config: {
      data: [],
      header: ['工单单号', '工单物料名称', '工序名称', '计划开始时间', '状态', '计划产量', '已生产良品', '不良数量'],
      headerBGC: 'rgba(0,0,0,0)',
      oddRowBGC: '#00275e',
      evenRowBGC: '#001447',
      columnWidth: [70, 180, 200, 160, 200, 100, 140, 180, 150],
      align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
      rowNum: 10,
      index: true
    }
  },
  mes3: {
    config: {},
    key: 1,
    tAnimationConfig: {
      Basis: 'x',
      Duration: 2000,
      Length: 99
    }
  },
  mes4: {
    config: {},
    key: 1,
    tAnimationConfig: {
      Basis: 'x',
      Duration: 2000,
      Length: 99
    }
  },
  mes5: {
    config: {},
    key: 1,
    tAnimationConfig: {
      Basis: 'x',
      Duration: 2000,
      Length: 99
    }
  },
  mes6: {
    config: {},
    key: 1,
    tAnimationConfig: {
      Basis: 'x',
      Duration: 2000,
      Length: 99
    }
  }
})

const loadMes1 = async () => {
  const { data, collectData } = await IndustrialComplexService.loadIndustrialComplexMes1()

  pageData.value.mes1.tableData = data
  pageData.value.mes1.collectData = collectData
  const configData = []

  for (let index = 0; index < data.length; index++) {
    const { BillNo, ProdName, Quantity, CustomerName, SourceTypeName, PutInQuantity, BillStatusName } = data[index]

    configData.unshift([BillNo, ProdName, CustomerName, SourceTypeName, Quantity, BillStatusName, PutInQuantity])
  }
  pageData.value.mes1.config.data = configData
  pageData.value.mes1.key++
}

const loadMes2 = async () => {
  const { data, collectData } = await IndustrialComplexService.loadIndustrialComplexMes2()

  pageData.value.mes2.tableData = data
  pageData.value.mes2.collectData = collectData
  const configData = []

  for (let index = 0; index < data.length; index++) {
    const { BillNo, ProdName, Quantity, PreWorkDate, CompleteDate, BadQty, GoodQty, OrderName, OrderBillStatus } =
      data[index]

    configData.unshift([BillNo, ProdName, OrderName, PreWorkDate, OrderBillStatus, Quantity, GoodQty, BadQty])
  }
  pageData.value.mes2.config.data = configData
  pageData.value.mes2.key++
}

const loadMes3 = async () => {
  const { data } = await IndustrialComplexService.loadIndustrialComplexMes3()
  const { config1, config2 } = data

  pageData.value.mes3.tAnimationConfig.Length = config1.xAxis ? config1.xAxis.data.length : 99
  pageData.value.mes4.tAnimationConfig.Length = config1.xAxis ? config1.xAxis.data.length : 99

  pageData.value.mes3.config = config1
  pageData.value.mes4.config = config2
}

const loadMes4 = async () => {
  const { data } = await IndustrialComplexService.loadIndustrialComplexMes4()
  const { config1, config2 } = data
  pageData.value.mes5.tAnimationConfig.Length = config1.xAxis ? config1.xAxis.data.length : 99
  pageData.value.mes6.tAnimationConfig.Length = config1.xAxis ? config1.xAxis.data.length : 99
  pageData.value.mes5.config = config1
  pageData.value.mes6.config = config2
}

const loadData = async () => {
  Promise.all([loadMes1(), loadMes2(), loadMes3(), loadMes4()])
}
onMounted(loadData)
</script>

<template>
  <div class="IntelligentIntegration3">
    <div class="dom1">
      <dv-border-box7 class="my-box7" :color="['#0749a3', '#4195d2']">
        <div class="dom-box">
          <div class="dom-title">工单生产监控</div>
          <div class="dom-content">
            <div class="list">
              <div
                class="list-item"
                :style="{ backgroundColor: item.Color }"
                v-for="(item, index) in pageData.mes1.collectData"
                :key="index"
              >
                <span class="title">{{ item.TypeText }}</span>
                <span class="number">{{ item.Total }}</span>
              </div>
            </div>
            <div class="chart-content">
              <dv-scroll-board :config="pageData.mes1.config" :key="pageData.mes1.key" />
            </div>
          </div>
        </div>
      </dv-border-box7>
    </div>
    <div class="dom2">
      <dv-border-box7 class="my-box7" :color="['#0749a3', '#4195d2']">
        <div class="dom-box">
          <div class="dom-title">任务单生产监控</div>
          <div class="dom-content">
            <div class="list">
              <div
                class="list-item"
                :style="{ backgroundColor: item.Color }"
                v-for="(item, index) in pageData.mes2.collectData"
                :key="index"
              >
                <span class="title">{{ item.TypeText }}</span>
                <span class="number">{{ item.Total }}</span>
              </div>
            </div>
            <div class="chart-content">
              <dv-scroll-board :config="pageData.mes2.config" :key="pageData.mes2.key" />
            </div>
          </div>
        </div>
      </dv-border-box7>
    </div>
    <div class="dom3">
      <dv-border-box7 class="my-box7" :color="['#0749a3', '#4195d2']">
        <div class="dom-box">
          <div class="dom-title">工单产量统计</div>
          <div class="dom-content">
            <ps-chart2
              :option="pageData.mes3.config"
              tooltipAnimation
              :tAnimationConfig="pageData.mes3.tAnimationConfig"
            />
          </div>
        </div>
      </dv-border-box7>
    </div>
    <div class="dom4">
      <dv-border-box7 class="my-box7" :color="['#0749a3', '#4195d2']">
        <div class="dom-box">
          <div class="dom-title">工单合格率报告</div>
          <div class="dom-content">
            <ps-chart2
              :option="pageData.mes4.config"
              tooltipAnimation
              :tAnimationConfig="pageData.mes4.tAnimationConfig"
            />
          </div>
        </div>
      </dv-border-box7>
    </div>
    <div class="dom5">
      <dv-border-box7 class="my-box7" :color="['#0749a3', '#4195d2']">
        <div class="dom-box">
          <div class="dom-title">工单入库统计</div>
          <div class="dom-content">
             <ps-chart2
              :option="pageData.mes5.config"
              tooltipAnimation
              :tAnimationConfig="pageData.mes5.tAnimationConfig"
            />
          </div>
        </div>
      </dv-border-box7>
    </div>
    <div class="dom6">
      <dv-border-box7 class="my-box7" :color="['#0749a3', '#4195d2']">
        <div class="dom-box">
          <div class="dom-title">工单不合格率报告</div>
          <div class="dom-content">
             <ps-chart2
              :option="pageData.mes6.config"
              tooltipAnimation
              :tAnimationConfig="pageData.mes6.tAnimationConfig"
            />
          </div>
        </div>
      </dv-border-box7>
    </div>
  </div>
</template>

<style scoped lang="scss">
.IntelligentIntegration3 {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 2fr 1fr;
  gap: 10px;

  .dom1 {
    grid-column: 1 / 3;
  }

  .dom2 {
    grid-column: 3 / 5;
  }

  .list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 10px;
    .list-item {
      display: flex;
      justify-content: space-between;
      padding: 20px 10px;
      color: #fff;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        font-size: 20px !important;
      }

      .number {
        font-size: 24px !important;
        font-weight: bold;
      }
    }
  }
}
.dom-box {
  display: flex;
  flex-direction: column;
  height: 100%;

  .dom-title {
    height: 40px;
    background-color: rgba(14, 58, 119, 0.6);
    color: #2ca7e2;
    line-height: 40px;
    padding-left: 20px;
  }

  .dom-content {
    flex: 1;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .chart-content {
    flex: 1;
    overflow: hidden;

    height: calc(100% - 70px);
  }
}

:deep(.my-box7.dv-border-box-7) {
  box-shadow: initial !important;
}
</style>
